<template>
  <div class="grid grid-cols-3 gap-4 mb-4">
    <div v-for="(item, index) in tabDataList" class="p-2 cursor-pointer">
      <div
        :class="`text-sm md:text-base  whitespace-nowrap p-2 flex items-center rounded justify-center bg-[#3f5360] text-white ${
          activeTab === item ? 'ring-1  activeColor' : 'ring-1 ring-gray-600'
        }`"
        @click="changeActiveTab(item)"
      >
        {{ item }}
        <!-- {{ main.currency }} -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick } from "vue";
import { mainAct } from "@/store/activeda";

const main = mainAct();
const props = defineProps({
  tabDataList: {
    type: Array,
    default: () => []
  }
});
const activeTab = ref("0");

const emit = defineEmits(["changeActiveTabVal"]);
const changeActiveTab = index => {
  activeTab.value = index;
  emit("changeActiveTabVal", index);
};

onMounted(() => {
  nextTick(() => {
    changeActiveTab(props.tabDataList[0]);
  });
});
</script>

<style lang="scss" scoped>
.activeColor {
  color: #1475e1;
}
</style>
